<script lang="ts" setup>
const props = defineProps<{
  status: string | number
  total: string | number
}>()
</script>

<template>
  <view>
    <view class="text-center font-size-[32rpx]">
      {{ props.status == 0 ? '续报率' : props.status == 1 ? "留存率" : '满班率' }}({{ props.total }}%)
    </view>
    <block v-if="props.status == 0">
      <view class="mt-3">
        <view class="font-size-[24rpx] color-[#999]">
          已报名(3)
        </view>
        <view class="flex flex-wrap">
          <template v-for="(item, index) in 3" :key="index">
            <view v-if="index % 4 != 0" class="line-col mt-2" />
            <view class="user-item mt-2">
              李豫卓
            </view>
          </template>
        </view>
      </view>
      <view class="mb-2 mt-5">
        <view class="font-size-[24rpx] color-[#999]">
          未续报(7)
        </view>
        <view class="flex flex-wrap">
          <template v-for="(item, index) in 8" :key="index">
            <view v-if="index % 4 != 0" class="line-col mt-2" />
            <view class="user-item mt-2">
              李豫卓
            </view>
          </template>
        </view>
      </view>
    </block>
    <block v-else-if="props.status == 1">
      <view class="mt-3">
        <view class="font-size-[24rpx] color-[#999]">
          已留存(3)
        </view>
        <view class="flex flex-wrap">
          <template v-for="(item, index) in 3" :key="index">
            <view v-if="index % 4 != 0" class="line-col mt-2" />
            <view class="user-item mt-2">
              李豫卓
            </view>
          </template>
        </view>
      </view>
      <view class="mb-2 mt-5">
        <view class="font-size-[24rpx] color-[#999]">
          未续报(7)
        </view>
        <view class="flex flex-wrap">
          <template v-for="(item, index) in 8" :key="index">
            <view v-if="index % 4 != 0" class="line-col mt-2" />
            <view class="user-item mt-2">
              李豫卓
            </view>
          </template>
        </view>
      </view>
      <view class="mb-2 mt-5">
        <view class="font-size-[24rpx] color-[#999]">
          已退费(7)
        </view>
        <view class="flex flex-wrap">
          <template v-for="(item, index) in 8" :key="index">
            <view v-if="index % 4 != 0" class="line-col mt-2" />
            <view class="user-item mt-2">
              李豫卓
            </view>
          </template>
        </view>
      </view>
    </block>
    <block v-else>
      <view class="mt-3">
        <view class="font-size-[24rpx] color-[#999]">
          已报名(3)
        </view>
        <view class="flex flex-wrap">
          <template v-for="(item, index) in 3" :key="index">
            <view v-if="index % 4 != 0" class="line-col mt-2" />
            <view class="user-item mt-2">
              李豫卓
            </view>
          </template>
        </view>
      </view>
    </block>
  </view>
</template>

<style lang="scss" scoped>
  .line {
    height: 1px;
    background: #ddd;
    transform: scaleY(0.5);
  }

  .line-col {
    width: 1px;
    background: #ddd;
    transform: scaleX(0.5);
    height: 40rpx;
  }

  .user-item {
    width: calc(25% - 1px);
    text-align: center;
    font-size: 30rpx;
  }
</style>
